<template>
  <div class="show">


        <div class="header">
            <div class="back" @click="$router.go(-1)">
                <svg t="1667899559679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19358" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="19359"></path></svg>
            </div>
            {{lists.fmname}}
        </div>


        <div class="showimg">
            <img :src="lists.showimg" alt="">
            <div class="msgbox">
                <div class="le">
                    <div class="name">
                        {{lists.fmname}}
                    </div>
                    <div class="shuzhi">
                        <div class="one">83亿人气值</div>
                        <div class="two">31万总评论</div>
                        <div class="three">193万关注</div>
                    </div>
                </div>
                <div class="ri">
                    <div :class="['watch',lists.guanzhusvg?'con':'']" @click="guanzhua">关注</div>
                </div>
            </div>
        </div>

        <div class="biaoqian">
            <div class="item" v-for="(item,index) in lists.fmbiaoqian" :key="index">
                {{item}}
            </div>
            <!-- <div class="item">
                剧情
            </div>
            <div class="item">
                非人类
            </div> -->
        </div>

        <div class="text">
            {{lists.showtext}}
        </div>

        <div class="doer">
            <div class="imgs">
                <img :src="lists.showdoer" alt="">
            </div>
            <p>{{lists.showdoername}}</p>
        </div>

        <div class="duoshao">
            <div class="le">
                <div class="xvan">
                    漫画选集
                </div>
                <div class="yigeng">
                    已更{{lists.all}}话
                </div>
            </div>
            <div class="ri"  @click="showPopup">
                展开选集<svg t="1667904485965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19513" width="200" height="200"><path d="M289.301454 938.361551c8.958022 8.93551 24.607444 7.868201 34.877345-2.312672l405.886217-403.662573c5.846148-5.780657 8.581446-13.271258 8.314363-20.306488 0.331551-7.080256-2.423189-14.637372-8.270361-20.463054L324.178799 87.966471c-10.269901-10.225899-25.875321-11.248182-34.877345-2.322905-8.960069 8.946766-7.936763 24.451902 2.334161 34.666544l393.880789 391.68068L291.635615 903.68375C281.364691 913.908626 280.341385 929.423995 289.301454 938.361551z" p-id="19514"></path></svg>
            </div>
        </div>

        <div class="showfm">
            <van-swipe :loop="false" :width="200" class="lbt" :show-indicators=false>
              <van-swipe-item class="lbtitem" v-for="(item,index) in neifm" :key="index"><div class="imgs"><img :src="item" alt=""></div></van-swipe-item>
            </van-swipe>
        </div>

        <div class="kanwan">
            <div class="msg">
                看完《{{lists.fmname}}》的还会看
            </div>
            <div class="more">
                更多<svg t="1667904485965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19513" width="200" height="200"><path d="M289.301454 938.361551c8.958022 8.93551 24.607444 7.868201 34.877345-2.312672l405.886217-403.662573c5.846148-5.780657 8.581446-13.271258 8.314363-20.306488 0.331551-7.080256-2.423189-14.637372-8.270361-20.463054L324.178799 87.966471c-10.269901-10.225899-25.875321-11.248182-34.877345-2.322905-8.960069 8.946766-7.936763 24.451902 2.334161 34.666544l393.880789 391.68068L291.635615 903.68375C281.364691 913.908626 280.341385 929.423995 289.301454 938.361551z" p-id="19514"></path></svg>
            </div>
        </div>

        <div class="showunder">
            <van-swipe :loop="false" :width="170" class="lbt" :show-indicators=false>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
              <van-swipe-item class="lbtitem"><div class="imgs"><img src="../assets/imgs/over.jpg" alt="">吾皇哈哈哈</div></van-swipe-item>
            </van-swipe>
        </div>


        <div class="gotoread">
            <div class="le">我的男友是一只猫</div>
            <router-link tag="div" :to="'/read?id='+qvkan" class="ri">开始阅读</router-link>
        </div>
        <!-- 更多章节 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
            <div class="morezhang">
            <div class="header">
                <div class="le">已更{{lists.all}}话</div>
                <div class="ri">
                    <!-- <div class="one">正序</div> -->
                    <div class="two" @click="reverseSum">切换顺序</div>
                </div>
            </div>
            <div class="item" v-for="(item,index) in zhangjie" :key="index">
                <div class="imgs">
                    <img :src="item.imgs" alt="">
                </div>
                <div class="wenzi">
                    <div class="bt">{{item.name}}</div>
                    <div class="time">{{item.time}}</div>
                </div>
            </div>
        </div>
        </van-popup>


        <div class="nothing">
        </div>
  </div>
</template>

<script>
import { getHomeData } from "../api/booklists"
export default {
    data(){
        return{
            homeman:null,
            lists:'',
            qvkan:"",
            neifm:"",
            neinum:"",
            zhangjie:"",
            show: false,
            dijitiao:"",
            guanzhulists:[],
            histtt:[],
            allSum:null,
            daoxv:"",
            // guanzhusvg:false,
            apcity:[]
        }
    },
    methods:{
        getDataFun(id){
            console.log(id)
            this.qvkan = id
            console.log("qvkan-----------------",id)
        },
        showPopup() {
            this.show = true;
        },
        guanzhua(){
            this.lists.guanzhusvg=!this.lists.guanzhusvg
            this.guanzhulists.push(this.lists)//把数据放到关注本地数组
            window.localStorage.setItem("guanzhu",JSON.stringify(this.guanzhulists))
            console.log(JSON.parse(window.localStorage.getItem("guanzhu")))
        },
        reverseSum(){
            console.log(this.allSum)
            return this.daoxv = this.allSum.reverse();
        }
    },
    created(){
        //关注
        if(window.localStorage.getItem("guanzhu")){
            this.guanzhulists = JSON.parse(window.localStorage.getItem("guanzhu"))
        }else{
            this.guanzhulists = []
        }

        // 获取历史记录
        if(window.localStorage.getItem("histtt")){
            this.histtt = JSON.parse(window.localStorage.getItem("histtt"))
        }else{
            this.histtt = []
        }
        this.getDataFun(this.$route.query.id);
        console.log(this.$route.query.id);
        getHomeData().then((data)=>{
            this.homeman = data.homeman
            let index = this.homeman.findIndex(item=>item.id==this.$route.query.id);
            this.lists=this.homeman[index];
            this.neifm = this.lists.neifm
            this.neinum = this.lists.neinum
            this.zhangjie = this.lists.zhangjie
            this.allSum = this.zhangjie

            // console.log(this.lists)
            this.apcity = JSON.parse(window.localStorage.getItem("guanzhu"))//把关注数组放到apcity
            // console.log(this.apcity)
            let index1 = this.apcity.findIndex(item=>item.id==this.$route.query.id)//找下标等于关注数组的找下标（他们的id等于传过来的值的话）
            // console.log(index1)
            if(index1!=-1){//如果有这个下标
                this.lists.guanzhusvg = this.apcity[index1].guanzhusvg//本详情页的数据的关注控制器等于159行控制的状态
            }
        })
        //检测本地关注数组中有没有这个，有就让关注按钮变透明
        
        
        
        
    },
    beforeDestroy(){
        console.log(this.lists)
        // //设置历史记录
        console.log(this.lists)
        this.histtt.push(this.lists)
        window.localStorage.setItem("histtt",JSON.stringify(this.histtt))
        // console.log(window.localStorage.getItem("histtt"))
    }
    
}
</script>

<style lang="scss">
.show .morezhang{
    width: 100%;
    background-color: #fff;
    height: 400px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    overflow-y: scroll;
    padding-bottom: 20px;
    .item{
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        margin-top: 20px;
        .imgs{
            width: 25%;
            img{
                width: 100%;
            }
        }
        .wenzi{
            font-size: 16px;
            margin-left: 10px;
            .time{
                font-size: 12px;
                color: #999999;
            }
        }
    }
    .header{
        width: 90%;
        margin: 0 auto;
        display: flex;
        height: 20px;
        margin-top: 10px;
        align-items: center;
        justify-content: space-between;
        .le{
            text-decoration: underline yellow 4px;
        }
        .ri{
            display: flex;
            font-size: 12px;
            .one{
                margin-right: 15px;
            }
        }
    }
}
.show .gotoread{
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    align-items: center;
    .le{
        font-size: 14px;
        color: #99b5d7;
        text-indent: 10px;
        
    }
    .ri{
        height: 100%;
        line-height: 40px;
        text-align: center;
        width: 35%;
        background-color: #fce23d;
    }
}
.show .nothing{
    width: 100%;
    height: 60px;
}
.show .showunder{
    width: 100%;
    .lbt{
        width: 100%;
        .lbtitem{
            padding: 0 5px;
            .imgs{
                width: 100%;
                text-indent: 10px;
                border-radius: 15px 15px 0 0;
                overflow: hidden;
                img{
                    width: 100%;
                }
                
            }
        }
    }
}
.show .kanwan{
    width: 90%;
    margin: 0 auto;
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .msg{
        font-size: 16px;
        line-height: 40px;
        height: 40px;
    }
    .more{
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 12px;
        svg{
            width: 12px;
            height: 12px;
        }
    }
}
.show .showfm{
    width: 100%;
    
    .lbt{
        width: 100%;
        .lbtitem{
            padding: 0 5px;
            .imgs{
                width: 100%;
                text-indent: 10px;
                border-radius: 15px 15px 0 0;
                overflow: hidden;
                img{
                    width: 100%;
                }
                
            }
        }
    }
}
.show .duoshao{
    width: 90%;
    margin: 0 auto;
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin-top: 30px;
    .le{
        height: 100%;
        .xvan{
            height: 20px;
            line-height: 20px;
            font-size: 16px;

        }
        .yigeng{
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            height: 20px;
        }
    }
    .ri{
        height: 40px;
        display: flex;
        font-size: 14px;
        color: #a7a7a7;
        align-items: center;
        svg{
            width: 12px;
            height: 12px;
        }
    }
}
.show .doer{
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .imgs{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
    p{
        margin-left: 10px;
        font-size: 14px;
        color: #999999;
    }

}
.show .text{
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 3px;
}
.show .biaoqian{
    width: 100%;
    padding: 10px 3%;
    display: flex;
    .item{
        font-size: 12px;
        margin: 0 10px;
        border-radius: 5px;
        padding: 2px 3px;
        background-color: #dfdfdf;
    }
}
.show .showimg{
    width: 100%;
    position: relative;
    .msgbox{
        width: 100%;
        height: 80px;
        position: absolute;
        left: 0px;
        bottom: 0px;
        display: flex;
        background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0.7),rgba(0,0,0,0));
        .le{
            width: 80%;
            height: 100%;
            .name{
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #fff;
                font-size: 18px;
                text-indent: 20px;
                margin-top: 10px;
            }
            .shuzhi{
                display: flex;
                font-size: 14px;
                margin-top: 10px;
                color: #fff;
                height: 14px;
                line-height: 14px;
                .one{
                    padding: 0 10px;
                }
                .two{
                    padding: 0 10px;
                    border-left: 2px solid #fff;
                    border-right: 2px solid #fff;
                }
                .three{
                    padding: 0 10px;
                }
            }

        }
        .ri{
            width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 14px;
            .watch{
                width: 90%;
                height: 30px;
                border-radius: 15px;
                background-color: #fce23d;
                text-align: center;
                line-height: 30px;
                &.con{
                    color: #fff;
                    background-color: rgba($color: #fff, $alpha: 0.5);
                }
            }
        }
    }
    img{
        width: 100%;
    }
}
.show .header{
    width: 100%;
    height: 50px;
    position: relative;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
    .back{
        position: absolute;
        left: 10px;
        top: 3px;
        width: 20px;
        height: 20px;
        svg{
            width: 20px;
            height: 20px;
        }
    }
}
</style>